<template>
  <el-dialog ref="dialogRef" :visible.sync="visible">
    <el-form :model="formData" label-width="80px">
      <!-- JSON 编辑器区域 -->
      <el-form-item label="JSON内容">
        <!-- <el-input
          v-model="formData.jsonContent"
          type="textarea"
          :rows="35"
          @blur="validateJSON"
        ></el-input> -->
        <div class="container-json-editor">
          <JsonEditorVue3
            v-model="formData.jsonContent"
            :modeList="couldView"
            :currentMode="'code'"
            style="height: 100%"
          ></JsonEditorVue3>
        </div>
        <div class="editor-actions">
          <el-button type="primary" @click="handleSave">保存</el-button>
          <!-- <el-button @click="handleCancel">取消</el-button> -->
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup name="JsonModal">
import 'jsoneditor'
import JsonEditorVue3 from 'json-editor-vue3'
import { computed, watch, ref } from 'vue'

const props = defineProps({
  value: String,
  visible: Boolean,
  isEditing: {
    type: Boolean,
    default: true,
  },
})

const emit = defineEmits(['update:visible', 'save'])

const dialogRef = ref(null)

const formData = ref({
  jsonContent: '',
})

const couldView = ref(['tree', 'code', 'form', 'view'])
const handleCancel = () => {
  emit('update:visible', false)
}

const handleSave = () => {
  emit('save', formData.value.jsonContent)
}

watch(
  () => props.value,
  (newVal) => {
    formData.value.jsonContent = newVal
  },
)
</script>

<style scoped>
.json-preview pre {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f8f8f8;
}

.editor-actions {
  margin-top: 10px;
  text-align: right;
}
:deep(.el-form-item__content) {
  display: block;
}
.container-json-editor {
  /* border: 1px solid red; */
  height: 700px;
}
</style>
